// 轮播
 
class Banner{
    constructor(ele) {
        this.oBox = $(ele);
        this.oUl = this.oBox.find('ul');
        this.oLis = this.oUl.find('a');
        this.oPrev = this.oBox.find('.banner-left-button');
        this.oBack = this.oBox.find('.banner-right-button');
        this.oOl = this.oBox.find('ol');
        this.oDots = this.oBox.find('ol li');
        
       
        this.count = 0;
        this.timer = null;
        this.flag = true;
       
        //获取数据
        this.render();
        this.autoPlay();
        this.event();
    }

    render() {
        
        carousel().then(res => {
            const { status, data , msg } = res;
            if (status) {
                let imgHTML = '';
                let dotHTML = '';
                data.forEach(v => {
                    // data是一个数组，每个数据都是一个对象
                    const { img:imgPic } = v;
                    imgHTML += `
                        <a href=""><li><img src="${imgPic}" alt=""></li></a>
                    `;
                    dotHTML += `<li></li>`;
                })
                // 相当于jq的innerHTML
                this.oUl.html(imgHTML);
                this.oOl.html(dotHTML);
                // 在这里重新获取一下
                this.oLis = this.oUl.find('a');
                this.oDots = this.oOl.find('li');
                
                // 默认第一张显示show
                $(this.oLis[0]).addClass('show');
                $(this.oDots[0]).addClass('active');

                // 小点点击写在这里，因为数据请求是异步的
                const _this = this;
                this.oDots.on('click', function () { 
                clearInterval(_this.timer);
                _this.count = $(this).index();
                _this.show();
                _this.autoPlay();
        })
            } else {
                alert(msg);
            }
            
        })
        
        
    }
    // 自动播放
    autoPlay() {
        this.timer = setInterval(() => {
            this.count++;
            if (this.count === this.oLis.length) {
                this.count = 0;
            }
            this.show();
        },3000)
        
        
    }

    // 点击事件
    event() {
        // 上翻页
        this.oPrev.on('click', () => {
            if (this.flag) {
                this.flag = false;
                clearInterval(this.timer);
                if (this.count === 0) {
                    this.count = this.oLis.length
                }
                this.count--;
                this.show();
                this.autoPlay();
                setTimeout(() => {
                    this.flag = true;
                },1000)
            }
        })
       
        // 下翻页
        this.oBack.on('click', () => {
            if (this.flag) {
                this.flag = false;
                clearInterval(this.timer);
                if (this.count === this.oLis.length-1) {
                    this.count = -1;
                }
                this.count++;
                this.show();
                this.autoPlay();
                setTimeout(() => {
                    this.flag = true;
                },1000)
            }
        })

        

    }
    //显示样式
    show() {
        if(this.count === this.oLis.length) {
            this.oLis.removeClass('show').eq(0).addClass('show');
            this.oDots.removeClass('active').eq(0).addClass('active');
        }else {
            this.oLis.removeClass('show').eq(this.count).addClass('show');
            this.oDots.removeClass('active').eq(this.count).addClass('active');
        }
        
    }
}
// 最好不要写在这里，写在html中
// new Banner('.play');

// 左边目录二级导航JQuery
const oCate = $('.catelog');
const oSecLi = oCate.find('li');
const oSec = oCate.find('.second-nav');
let flag = true;
// 默认隐藏
oSec.hide();
// 鼠标移入
if (flag) {
    flag = false;
    oSecLi.mouseenter(function () {  
        oSec.show();
        $(this).addClass('levitation');
        
        oSec.mouseenter(() => {  
            oSec.show();
            $(this).addClass('levitation');
        })
        // 鼠标移出
        oSecLi.mouseleave(() =>  {  
            oSec.hide();
            $(this).removeClass('levitation');
        })
    
    })
    // oSec.mouseenter(function () {  
    //     oSec.show();
    // })   
}



